<template>
  <div>
    <div class="head_top">
      <el-page-header @back="goBack" content="攻略管理"></el-page-header>
    </div>

    <div class="form">
    <el-form :model="row" :rules="rules" ref="row" label-width="100px" class="demo-ruleForm">
      <el-form-item label="攻略名称:" prop="s_name">
        <el-input v-model="row.s_name" placeholder="请输入攻略名称"></el-input>
      </el-form-item>
      <el-form-item label="攻略标题:" prop="s_title">
        <el-input v-model="row.s_title" placeholder="请输入攻略标题"></el-input>
      </el-form-item>
      <el-form-item label="攻略图片:" prop="s_icon">
        <el-upload
          class="avatar-uploader"
          :action="url"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="row.s_icon" :src="row.s_icon" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="攻略内容:">
        <veditor ref='editor' v-loading="text_load"></veditor>
      </el-form-item>
      <el-form-item label="" style="margin-top: 80px;">
        <el-button type="primary" @click="onSubmit('row')" :loading="btn_load">提交</el-button>
        <el-button @click="resetForm('row')">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
  import veditor from '../public/editor.vue'

  export default{
    data(){
      return{
        id:null,
        row:{
          s_name: '',
          s_title: '',
          s_icon: '',
        },
        btn_load:false,
        text_load:false,
        url:'',
        rules:{
          's_name':[
             { required: true, message: '请输入攻略标题', trigger: 'blur' },
             { min: 1, message: '请输入攻略标题', trigger: 'blur' }
          ],
          's_title':[
             { required: true, message: '请输入攻略标题', trigger: 'blur' },
             { min: 1, message: '请输入攻略标题', trigger: 'blur' }
          ],
          's_icon':[
             { required: true, message: '请上传攻略图片', trigger: 'blur' },
             { min: 1, message: '请上传攻略图片', trigger: 'blur' }
          ],
        }
      }
    },methods:{
      onLoad:function(){
        var that=this

        this.$axios.post('/admin.php/strategy/show_row',this.$qs.stringify({id:this.id})).then(
          (res)=>{
            if(res.data.code==1){
              that.row=res.data.data.row;

              setTimeout(function(){that.onText();},1000);
            }else{
              that.$notify.info({
                title: '消息',
                message: res.data.msg
              });

              setTimeout(function(){that.goBack();},1300);
            }
          }
        ).catch(
          (res)=>{
            that.$notify({
              title: '警告',
              message: '网络繁忙',
              type: 'warning'
            });
          }
        )
      },
      onText:function(){
        this.$refs.editor.content=this.row.s_text;

        this.text_load=false;

        this.$notify({
          title: '成功',
          message: '加载成功',
          type: 'success'
        });
      },
      onSubmit:function(form){
        this.$refs[form].validate((valid) => {
          if (valid) {
            var that=this

            this.btn_load=true;

            this.row.s_text=this.$refs.editor.content;

            this.$axios.post('/admin.php/strategy/upda_btn',this.$qs.stringify(this.row)).then(
              (res)=>{
                if(res.data.code==1){
                  that.btn_load=false;

                  that.$notify({
                    title: '操作提示',
                    message: '操作成功',
                    type: 'success'
                  });

                  setTimeout(function(){that.goBack();},1300);
                }else{
                  that.btn_load=false;
                  that.$notify.info({
                    title: '消息',
                    message: res.data.msg
                  });
                }
              }
            ).catch(
              (res)=>{
                that.$notify({
                  title: '警告',
                  message: '网络繁忙',
                  type: 'warning'
                });
              }
            )
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm:function(formName) {
        this.row.s_title='';
        this.row.s_text='';
        this.row.s_icon='';
        this.row.s_name='';
      },
      goBack:function(){
        this.$router.push({path:'/admin/strategy'});
      },
      handleAvatarSuccess:function(res, file){
        if(res.code==1){
          this.row.s_icon=res.data.src;

          this.$message({
            type:'success',
            message:'上传成功'
          })
        }
      },
      beforeAvatarUpload:function(file){
        var type=file.type
        var size=file.size/1024/1024 <3

        var type_arr=['image/jpeg','image/jpg','image/png','image/gif'];

        if(type_arr.indexOf(type)<0){
          this.$message.error('请上传图片类型!');

          return false;
        }

        if(!size){
          this.$message.error('上传图片大小不能超过 3MB!');

          return false;
        }
      }
    },components:{
      veditor
    },created() {
      this.id=typeof(this.$route.query.id)

      this.url=process.env.API_ROOT+'/upload/scenic'

      if(this.id!='undefined'){
        this.id=this.$route.query.id
        this.onLoad();
      }
    }
  }
</script>

<style scoped>
  .form{
    width:800px;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 250px;
      height: 178px;
      line-height: 178px;
      text-align: center;
      background-color: #fff;
    }
    .avatar {
      width: 250px;
      height: 178px;
      display: block;
    }
</style>
